<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@next"></script>
	</head>

	<body>
		<!--199000326 刘祥海-->
		<div id="app"></div>
		<template id="root">
		<div class="shop-cart">
			<div class="tabs">
				<div class="border">
					<!-- data-*表示自定义属性。 -->
					<div class="title" data-index="0" :class="{active:currentShow==0}" @mouseenter="aaa()">
						全部商品
						<span class="count">{{allGoods}}</span>
					</div>
					<div class="title"  data-index="1" :class="{active:currentShow==1}" @mouseenter="aaa()">
						降价商品
						<span class="count">0</span>
					</div>
					<div class="title last"   data-index="2" :class="{active:currentShow==2}" @mouseenter="aaa()">
						库存紧张
						<span class="count">0</span>
					</div>
					<div class="line"></div>
				</div>
			</div>
			<!--199000326刘祥海-->
			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<li>
							<!-- <input type="checkbox" class="select-all" v-model="allCheck" @change="checkAll()"> -->
							<span :class="[allCheck? 'ckb_s':'ckb']" @click="checkAll()"></span>
							<label>全选</label>
						</li>
						<li class="product-info">商品信息</li>
						<li>单价</li>
						<li>数量</li>
						<li>金额</li>
						<li>操作</li>
					</ul>
				</div>
				<!-- 实验需要操作的节点 -->
				
				<div id="shoplist" class="shoplist">
					<!-- 店铺内容及样式参考 -->
					
					
					<div class="shop" v-for="(item,index) in shopcarts" :key="item.shopId">
						<div class="shop-info">
							<!--<input type="checkbox" v-model="item.checked" @change="checkAll1(item)">-->
							<span :class="[item.checked? 'ckb_s':'ckb']" @click="checkAll1(item)"></span>
							<span class="shop-tip">店铺：</span>
							<a class="shop-name" href="#">{{ item.shopName}}</a>
							<a href="#" class="wangwang">旺旺</a>
						</div>
						<div class="products" >
							<div class="item" v-for="(subItem,index) in item.products" :class="{bgshow:(index+1)%2===0}">
								<div class="select-logo">
									<!--<input type="checkbox" v-model="subItem.checked" @change="checkSubitem(item)">-->
									<span :class="[subItem.checked? 'ckb_s':'ckb']" @click="checkSubitem(item,subItem)"></span>
									<img :src="subItem.topImg" alt="产品logo">
								</div>
								<div class="product-detail">
									<div class="left">
										<a href="#" class="product-name">
											{{ subItem.productName}}
										</a>
										<div class="logos">
											<a href="#" class="card">信用卡</a>
											<a href="#" class="service">保障服务</a>
											<a href="#" class="order">订单险</a>
											<a href="#" class="seven">7天无理由</a>
										</div>
									</div>
									<div class="right" v-html="subItem.spec">
								
									</div>
								</div>
								<div class="price">
									<p class="market-price">{{ subItem.marketPrice}}</p>
									<p class="real-price">{{ subItem.price}}</p>
								</div>
								<div class="count">
									<span class="sub" @click="subItem.count>1? subItem.count--:1" :class="[subItem.count==1? 'bgwhite':'']">-</span>
									<span class="input"><input type="text" v-model="subItem.count" disabled></span>
									<span class="add" @click="subItem.count++">+</span>
								</div>
								<div class="amount">{{ itemPrice(subItem.price,subItem.count)}}</div>
								<div class="delete">
									<a href="#" @click="deleteItem(item,subItem)">删除</a>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>

			<div class="operate">
				<div class="left">
					<!-- <input type="checkbox" class="select-all-footer"> -->
					<!-- <span :class="[subItem.checked? 'ckb_s':'ckb']"></span> -->
					<span :class="[this.deleteCheck? 'ckb_s':'ckb']" @click="deteleCheck()"></span>
					<a href="javascript:void(0);" @click="checkedDelete(item,subItem)">删除</a>
				</div>

				<div class="right">
					<div>已选择商品<span class="selected-count">{{ sumGoods }}</span>件</div>
					<div class="amount">合计（不含运费）： <span class="sum">￥{{ sumPrice }}</span></div>
					<a href="javascript:void(0);" class="settle" :class="{active:payStyle}">结算</a>
				</div>
			</div>
		</div>
		</template>
		<script>
			const app = Vue.createApp({
				template:"#root",
				data(){
					return {
						shopcarts:shopcarts,
						allCheck:true,
						payStyle:true,
						currentShow:0,
						isCkb:0,
						deleteCheck:false,
					}
				},
				methods:{
					aaa(){
						let val = event.target.getAttribute("data-index")
						this.currentShow=val
						// console.log(val);
						let line = document.querySelector(".line")
						line.style.left = val * line.offsetWidth+"px";
					},
					isCkb1(){
						if(this.isCkb==0){
							this.isCkb=1
						}else{
							this.isCkb=0
						}	
					},
			
					//商品金额	
					itemPrice(price,count){
						return price*count;
					},
					//删除商品
					deleteItem(item,subItem){
						item.products.splice(item.products.indexOf(subItem),1);
						if(item.products.length<=0){
							this.shopcarts.splice(this.shopcarts.indexOf(item),1)
						}
					},
					//全选
					checkAll(){
						this.allCheck=!this.allCheck
						this.shopcarts.forEach(item=>{
							item.checked = this.allCheck
							item.products.forEach(subItem=>{
								subItem.checked = this.allCheck
							})
						})	

					},
					//店铺全选
					checkAll1(item,shopcarts){
						item.checked=!item.checked
						item.products.forEach(subItem=>{
							subItem.checked = item.checked
						})
						let num = this.shopcarts.filter(item=>{ return item.checked }).length
						if(num == this.shopcarts.length){
							this.allCheck=true
						}else{
							this.allCheck=false
						}
					},
				
					//商品选择框
					checkSubitem(item,subItem){
						// let num=item.products.filter(subItem=>{
						// 	return subItem.checked
						// }).length
						// if(num==item.products.length){
						// 	item.checked = true
						// }else{
						// 	item.checked= false;
						// }

						// let num1 = this.shopcarts.filter(item=>{
						// 	return item.checked
						// }).length
						// if(num1==this.shopcarts.length){
						// 	this.allCheck = true
						// }else{
						// 	this.allCheck = false;
						// }
						subItem.checked=!subItem.checked;
						let num = item.products.filter(subItem=>{ return subItem.checked }).length
						if(num == item.products.length){
							item.checked = true
						}else{
							item.checked = false
						}
						let num1 = this.shopcarts.filter(item=>{ return item.checked }).length
						if(num1 == this.shopcarts.length){
							this.allCheck=true
						}else{
							this.allCheck=false
						}
						
						
					},
					deteleCheck(){
						this.deleteCheck=!this.deleteCheck
					},
					//删除选择框
					checkedDelete(item,subItem){
						// console.log(event.target.previousElementSibling);
						if(this.deleteCheck){
							this.shopcarts.forEach(item=>{
								item.products.forEach(subItem=>{
									if(subItem.checked){
										let num=item.products.filter(subItem=>{
											return subItem.checked
										}).length
										item.products.splice(item.products.indexOf(subItem),num);
									}		
								})
							})
						}else{
							alert("未勾选")
						}
					},
			
				},
				computed:{
					//计算总价
					sumPrice(){
						let sum = 0;
						this.shopcarts.forEach(item => {
							item.products.forEach(subItem=>{
								if(subItem.checked){
									sum += ( subItem.price*subItem.count)
								}
							})
						});
						return sum;
					},
					//计算选中总数量
					sumGoods(){
						let sum = 0;
						this.shopcarts.forEach(item=>{
							item.products.forEach(subItem=>{
								if(subItem.checked){
									sum+=subItem.count
								}
							})
						})
						return sum;
					},
					//计算全部商品
					allGoods(){
						let sum = 0;
						this.shopcarts.forEach(item=>{
							item.products.forEach(subItem=>{
								
									sum+=subItem.count
								
							})
						})
						return sum;
					},
					shopcarts1(){
						return JSON.stringify(this.shopcarts)
					},
				
				
				},
				watch:{
					//监听 当选择数量>0时  结算按钮可用
					sumGoods:{
						handler:function(nvalue){
							if(nvalue>0){
								this.payStyle=true;
							}else{
								this.payStyle=false;	
							}
						},
						deep:true,
						immediate:true
					},
					//监听 当商品数量为0时删除店铺
					shopcarts1(){
						// console.log('监听')
						this.shopcarts.forEach((p)=>{
							if(p.products.length==0){
								this.shopcarts.splice(this.shopcarts.indexOf(p),1)
							}
						})
					},
				
				}
			});
			app.mount("#app")
		</script>
	</body>

</html>
